<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Knob demo</title>
        <script src="js/jquery.min.js"></script>
        <script src="js/jquery.knob.js"></script>
        <script>
            $(function() {
                $(".knob").knob();

                // Example of infinite knob, iPod click wheel
                var val,up=0,down=0,i=0
                    ,$idir = $("div.idir")
                    ,$ival = $("div.ival")
                    ,incr = function() { i++; $idir.show().html("+").fadeOut(); $ival.html(i); }
                    ,decr = function() { i--; $idir.show().html("-").fadeOut(); $ival.html(i); };
                $("input.infinite").knob(
                                    {
                                    'min':0
                                    ,'max':20
                                    ,'stopper':false
                                    ,'change':function(v){
                                                if(val>v){
                                                    if(up){
                                                        decr();
                                                        up=0;
                                                    }else{up=1;down=0;}
                                                }else{
                                                    if(down){
                                                        incr();
                                                        down=0;
                                                    }else{down=1;up=0;}
                                                }
                                                val=v;
                                            }
                                    }
                                    );


                // Automatic mode
                /*var autoVal = 0
                    ,timer = setInterval(function() {
                        $(".knob").each(
                                function(){
                                    $(this)
                                        .val(Math.round(Math.sin(autoVal)*100))
                                        .trigger('change');
                                }
                            );
                        autoVal++;
                    }, 100);*/

                 // Configure
                 /*$(".knob").val(25).trigger(
                            "configure",
                            {"min":10, "max":40, "fgColor":"#FF0000", "skin":"tron", "cursor":true}
                            );*/

                 // Change example
                 /*$(".knob").knob(
                                {
                                'change':function(e){
                                        console.log(e);
                                    }
                                }
                            )
                           .val(79)
                           ;*/
            });
        </script>
        <style>
            h2{color:#87CEEB;font-family:'Georgia';}
        </style>
    </head>
    <body>
        <div style="float:left;width:100%;font-family:'Georgia';font-size:70px;font-weight:bold;color:#87CEEB;letter-spacing:-5px">
            Knob demo 
        </div>
        <div style="float:left;width:300px;height:300px;background-color:#222;color:#FFF;padding:20px">
            <pre>
data-width="75"
data-fgColor="#fff"
data-skin="tron"
data-displayPrevious=true
            </pre>
            <input class="knob" data-width="75" data-displayPrevious=true data-fgColor="#ffec03" data-skin="tron" data-cursor=true value="75">
        </div>
        <div style="float:left;width:300px;height:300px;background-color:#222;color:#FFF;padding:20px">
            <pre>
data-width="150"
data-fgColor="#fff"
data-skin="tron"
data-thickness=".2"
data-displayPrevious=true
            </pre>
            <input class="knob" data-width="150" data-displayPrevious=true data-fgColor="#ffec03" data-skin="tron" data-thickness=".2" value="75">
        </div>
        <div style="float:left;width:300px;height:300px;background-color:#222;color:#FFF;padding:20px">
            <pre>
data-width="150"
data-fgColor="#fff"
data-skin="tron"
data-thickness=".1"
            </pre>
            <input class="knob" data-width="150" data-fgColor="#C0ffff" data-skin="tron" data-thickness=".1" value="35">
        </div>
        <div style="clear:both"></div>
        <div style="float:left;width:300px;height:300px;padding:20px">
            <pre>
data-width="100"
data-displayInput=false
            </pre>
            <input class="knob" data-width="100" data-displayInput=false value="35">
        </div>
        <div style="float:left;width:300px;height:300px;padding:20px">
            <pre>
data-width="200"
data-cursor=true
            </pre>
            <input class="knob" data-width="200" data-cursor=true value="29">
        </div>
        <div style="float:left;width:300px;height:300px;padding:20px">
            <pre>
data-width="200"
data-min="-100"
data-cgColor="#A9EFFD"
data-displayPrevious=true
data-angleOffset="90"
            </pre>
            <input class="knob"data-width="200" data-min="-100" data-angleOffset="90" data-displayPrevious=true value="44">
        </div>
        <div style="clear:both"></div>
        <div style="float:left;width:300px;height:320px;padding:20px">
            <h2>Ticks</h2>
            <pre>
data-cursor=true
data-skin="tron"
data-ticks="8"
            </pre>
            <input class="knob" data-cursor=true data-skin="tron" data-ticks="8" value="35">
        </div>
        <div style="float:left;width:300px;height:320px;padding:20px">
            <h2>Readonly</h2>
            <pre>
data-thickness=".4"
data-fgColor="chartreuse"
data-readOnly=true
            </pre>
            <input class="knob" data-fgColor="chartreuse" data-thickness=".4" data-readOnly=true value="22">
        </div>
        <div style="float:left;width:300px;height:320px;padding:20px">
            <h2>Knobify!</h2>
            <pre>
data-width="200"
            </pre>
            <input type="button" onClick="$('.knob-dyn').knob();" value="knobify!">
            <input type="text" class="knob-dyn" data-width="200" data-cursor=true value="56">
            <pre>
data-width="50"
data-cursor=true
            </pre>
            <input type="button" onClick="$('.knob-dyn2').knob();" value="knobify!">
            <input type="text" class="knob-dyn2" data-width="50" data-thickness=".4" value="56">
        </div>
        <div style="clear:both"></div>
        <div style="float:left;height:440px;width:420px;padding:20px">
            <h2>Infinite / iPod click wheel</h2>
            <div style="float:left;width:200px;height:300px;padding:20px;background-color:#EEEEEE;text-align:center;">
                <pre>
data-width="150"
data-cursor=true
data-thickness=".5"
data-fgColor="#AAAAAA"
data-bgColor="#FFFFFF"
data-displayInput="false"
+ some code
                </pre>
                <input class="infinite" data-width="150" data-thickness=".5" data-fgColor="#AAAAAA" data-bgColor="#FFFFFF" data-displayInput="false" data-cursor=true>
            </div>
            <div style="float:left;margin-top:200px;">
                <div class="ival" style="width:100px;text-align:center;font-size:50px;color:#AAA">0</div>
                <div class="idir" style="width:100px;text-align:center;font-size:50px;"></div>
            </div>
        </div>
        <div style="border: 0 none; position: absolute; right: 0; top: 0;"><a href="https://github.com/aterrien" target="_blank"><img src="../i/github-ribbon.png" style="border: 0 none;"></a></div>
    </body>
</html>